<a4j:region id="#{widget.id}_region"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:c="http://java.sun.com/jstl/core"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:nxh="http://nuxeo.org/nxweb/html"
  xmlns:nxu="http://nuxeo.org/nxweb/util"
  xmlns:nxl="http://nuxeo.org/nxforms/layout"
  xmlns:nxd="http://nuxeo.org/nxweb/document"
  xmlns:a4j="http://richfaces.org/a4j"
  xmlns:nxa4j="http://nuxeo.org/nxweb/a4j"
  xmlns:ui="http://java.sun.com/jsf/facelets">
<c:if test="false">
  Template for toggleable layout mode logics, exposing two zones to fill with
  the actual layout content to toggle:
  - initial_mode_content
  - toggled_mode_content (used both in ajax and non ajax forms)
</c:if>

  <a4j:outputPanel id="#{widget.id}_regionPanel" layout="block">

    <nxu:set var="widgetPanelComponent"
      value="#{component}"
      cache="true">
    <nxu:set var="initialMode"
      value="#{nxu:test(empty widgetProperty_initialMode, 'view', widgetProperty_initialMode)}"
      cache="true">
    <nxu:set var="toggledMode"
      value="#{nxu:test(empty widgetProperty_toggledMode, 'edit', widgetProperty_toggledMode)}"
      cache="true">
    <nxu:set var="canToggleMode"
      value="#{nxu:test(empty widgetProperty_canToggleMode, webActions.checkFilter('canToggleLayoutToEditMode'), widgetProperty_canToggleMode)}"
      cache="true">
    <nxu:set var="initialActionLabel"
      value="#{nxu:test(empty widgetProperty_initialActionLabel, messages['action.view.modification'], nxu:test(widget.translated, messages[widgetProperty_initialActionLabel], widgetProperty_initialActionLabel))}"
      cache="true">
    <nxu:set var="cancelActionLabel"
      value="#{nxu:test(empty widgetProperty_cancelActionLabel,  messages['command.cancel'], nxu:test(widget.translated, messages[widgetProperty_cancelActionLabel], widgetProperty_cancelActionLabel))}"
      cache="true">
    <nxu:set var="actionsCategory"
      value="#{nxu:test(widgetProperty_hideDefaultActions, null, 'EDIT_DOCUMENT_FORM')}"
      cache="true">
    <nxu:set var="actionsDisplay"
      value="#{nxu:test(empty widgetProperty_actionsDisplay, 'buttons', widgetProperty_actionsDisplay)}"
      cache="true">
    <nxu:set var="useAjaxForm"
      value="#{nxu:test(empty widgetProperty_useAjaxForm, false, widgetProperty_useAjaxForm)}"
      cache="true">
    <nxu:set var="showEditOptions"
      value="#{nxu:test(empty widgetProperty_showEditOptions, false, widgetProperty_showEditOptions)}"
      cache="true">
    <nxu:set var="modeValueHolderId"
      value="#{widget.id}_modeValueHolder"
      cache="true">
    <nxu:set var="disableDoubleClickShield"
      value="#{nxu:test(empty widgetProperty_disableDoubleClickShield, false, widgetProperty_disableDoubleClickShield)}"
      cache="true">

    <nxu:valueHolder
      id="#{modeValueHolderId}"
      var="layoutWidgetMode"
      defaultValue="#{nxu:test(widgetProperty_toggledByDefault and canToggleMode, toggledMode, initialMode)}"
      submitChanges="false">
    <nxu:set var="layoutToggled" value="#{layoutWidgetMode != initialMode}">
    <c:if test="false">
      set toggled layout name after layout widget mode is set so that
      the variable "layoutWidgetMode" can be used to resolve the accurate
      layout. For instance Studio can generate expressions like:
      #{layoutWidgetMode == 'edit'? 'myLayout@edit': 'myLayout@view'}
    </c:if>

    <nxu:set var="initialLayoutName"
      value="#{widget.properties['initialLayoutName']}"
      resolveTwice="true" cache="false" local="true">
    <nxu:set var="toggledLayoutNameFromW"
      value="#{widget.properties['toggledLayoutName']}"
      resolveTwice="true" cache="false">
    <nxu:set var="toggledLayoutName"
      value="#{nxu:test(empty toggledLayoutNameFromW, initialLayoutName, toggledLayoutNameFromW)}"
      cache="false">

      <ui:decorate template="/widgets/incl/foldable_box_template.xhtml">
        <ui:param name="hideHeader" value="#{not widget.handlingLabels}" />
        <ui:param name="foldable" value="#{widgetProperty_foldable}" />
        <ui:param name="foldedByDefault" value="#{widgetProperty_foldedByDefault and not layoutToggled}" />
        <ui:param name="foldableBoxStyleClass" value="widgetPanel layoutWidgetPanel #{widgetProperty_styleClass}" />
        <ui:param name="headerStyleClass" value="widgetHeader #{nxu:test(widgetProperty_foldable, '', 'summaryTitle')} #{widgetProperty_headerStyleClass}" />
        <ui:param name="headerFormId" value="#{widget.id}_headerForm" />

        <ui:define name="foldable_box_header_content">

          <ui:include src="/widgets/incl/widget_label_template.xhtml">
            <ui:param name="defaultLabel"
              value="#{foldable?messages['label.foldableBox.foldUnfold']:''}" />
            <ui:param name="labelStyleClass"
              value="#{widgetProperty_headerStyleClass}" />
            <ui:param name="hideHelp" value="true" />
          </ui:include>

          <c:if test="#{widgetProperty_displayToggleActionInHeader}">
            <c:if test="#{canToggleMode}">
              <h:outputText value=" " />
              <ui:include src="toggleable_layout_with_forms_toggle_button.xhtml">
                <ui:param name="idPrefix" value="header_" />
                <ui:param name="display" value="buttons" />
                <ui:param name="toggleButtonStyleClass" value="action" />
                <ui:param name="modeSwitch" value="#{nxu:test(layoutToggled, initialMode, toggledMode)}" />
                <ui:param name="buttonLabel" value="#{nxu:test(layoutToggled, cancelActionLabel, initialActionLabel)}" />
              </ui:include>
            </c:if>
          </c:if>

        </ui:define>

        <ui:define name="foldable_box_content">

          <c:if test="#{widget.handlingLabels and not empty widget.helpLabel}">
            <nxu:set var="widgetHelpLabel"
              value="#{nxu:test(widget.translated, messages[widget.helpLabel], widget.helpLabel)}"
              cache="true">
              <h:outputText value="#{widgetHelpLabel}" class="infoMessage" />
            </nxu:set>
          </c:if>

          <h:form id="#{widget.id}_initialForm"
            enctype="multipart/form-data"
            rendered="#{not layoutToggled}">

            <nxu:set var="layoutWidgetMode" value="#{initialMode}">
              <ui:insert name="initial_mode_content" />
            </nxu:set>

            <c:if test="#{canToggleMode and (hideHeader or not widgetProperty_displayToggleActionInHeader)}">
              <p class="buttonsGadget">
                <ui:include src="toggleable_layout_with_forms_toggle_button.xhtml">
                  <ui:param name="modeSwitch" value="#{nxu:test(layoutToggled, initialMode, toggledMode)}" />
                  <ui:param name="buttonLabel" value="#{nxu:test(layoutToggled, cancelActionLabel, initialActionLabel)}" />
                </ui:include>
              </p>
            </c:if>

          </h:form>

          <h:panelGroup layout="block" rendered="#{layoutToggled}">
            <nxu:form id="#{widget.id}_toggledForm"
              useAjaxForm="#{useAjaxForm}"
              disableMultipartForm="#{widgetControl_disableMultiPartForm}"
              onsubmit="#{nxu:test(useAjaxForm, 'onSubmitToggledForm(); return true;', '')}"
              styleClass="safeEditEnabled"
              disableDoubleClickShield="#{disableDoubleClickShield}">

                <c:if test="#{useAjaxForm}">
                  <h:outputScript target="#{pageJsTarget}">
                    function onSubmitToggledForm(form) {
                      jQuery(form).data('dirtyPage', false);
                      jQuery(window).unbind('beforeunload');
                      jQuery(form).cleanupSavedData();
                    }
                  </h:outputScript>
                </c:if>

                <nxu:set var="layoutWidgetMode" value="#{toggledMode}">
                  <ui:insert name="toggled_mode_content" />

                  <c:if test="#{showEditOptions and nxd:isDocumentModel(fieldOrValue)}">
                    <nxl:layout name="document_edit_form_options"
                      mode="#{layoutWidgetMode}" value="#{fieldOrValue}" />
                  </c:if>
                </nxu:set>

                <p class="buttonsGadget">

                  <nxu:set var="display"
                    value="#{actionsDisplay}"
                    cache="true">

                    <nxu:set var="allActionCategories"
                      value="#{actionsCategory} #{widgetProperty_additionalActionsCategory}"
                      cache="true">
                    <nxu:set var="actions"
                      value="#{webActions.getActionsList(allActionCategories)}"
                      cache="true">
                      <c:forEach var="action" items="#{actions}">
                        <c:if test="#{useAjaxForm}">
                          <nxu:set var="addForm" value="false" cache="true">
                            <ui:decorate template="/incl/action/action_template.xhtml">
                              <ui:param name="idPrefix" value="#{widget.id}_" />
                              <ui:param name="actionStyleClass" value="smallButton" />
                              <ui:param name="useAjaxForm" value="true" />
                              <ui:param name="ajaxReRender" value=":#{widgetPanelComponent.clientId}" />
                              <ui:param name="onSubmit" value="onSubmitToggledForm(this.form);" />
                              <ui:define name="after_action_trigger">
                                <f:attribute name="selectedValue" value="#{initialMode}" />
                                <f:attribute name="targetComponentId" value="#{modeValueHolderId}" />
                                <nxu:actionListenerMethod value="#{selectionActions.setStaticValue}" />
                              </ui:define>
                            </ui:decorate>
                          </nxu:set>
                        </c:if>
                        <c:if test="#{not useAjaxForm}">
                          <nxu:set var="addForm" value="false" cache="true">
                            <ui:decorate template="/incl/action/action_template.xhtml">
                              <ui:param name="idPrefix" value="#{widget.id}_" />
                              <ui:param name="actionStyleClass" value="smallButton" />
                            </ui:decorate>
                          </nxu:set>
                        </c:if>
                      </c:forEach>
                    </nxu:set>
                    </nxu:set>

                    <input type="hidden" name="restoreCurrentTabs" value="true" />

                    <ui:include src="toggleable_layout_with_forms_cancel_button.xhtml" />

                  </nxu:set>

                </p>

                <script>
                  jQuery(document).ready(function(){
                    var #{widget.id}_formId = jQuery('form[id$=#{widget.id}_toggledForm]').attr('id').split(":").join("\\:");
                    jQuery('#' + #{widget.id}_formId).initSafeEditOnForm('toggled-#{widget.id}-#{fieldOrValue}', "#{messages['safeedit.page.has.unsaved.changes']}");
                  });
                </script>

            </nxu:form>
          </h:panelGroup>

        </ui:define>
      </ui:decorate>

    </nxu:set>
    </nxu:set>
    </nxu:set>

    </nxu:set>
    </nxu:valueHolder>

    </nxu:set>
    </nxu:set>
    </nxu:set>
    </nxu:set>
    </nxu:set>
    </nxu:set>
    </nxu:set>
    </nxu:set>
    </nxu:set>
    </nxu:set>
    </nxu:set>
    </nxu:set>

  </a4j:outputPanel>

</a4j:region>